<template>
  <a-modal class="error-modal" v-model:visible="_d.visible" 
    :footer="null"
    :mask="false"
    width="400px">{{ _d.message }}</a-modal>
</template>

<script setup>
    import { reactive, ref, onMounted } from 'vue'
    const _d = reactive({
      visible: false,
      message: '',
      timer: null,
    })
      function open(message) {
        _d.message = message;
        _d.visible = true;

        clearTimeout(_d.timer);
        _d.timer = setTimeout(() => {
          _d.visible = false;
        }, 5000);
      }


      defineExpose({
          open
      })

</script>

<style lang="less">
.error-modal {
  position: absolute;
  top: auto;
  left: 50%;
  margin-left: -75px;
  padding-bottom: 0;
  bottom: 100px;
  .ant-modal-body {
    padding: 15px 24px;
    background: #fef0f0;
	  color: #c45656;
    font-size: 16px;
  }
}
</style>